<template>
  <view class="order-out-box">
    <view class="order-status-tab">
      <view class="keyword-view clearfix">
        <view class="float_left">
          <u-search
            @clear="searchConfirm()"
            @search="searchConfirm()"
            :show-action="false"
            :clearabled="true"
            placeholder="订单编号/退货单号/商品名称"
            v-model="search_data.search"
            height="72"
            placeholder-color="#879BBA"
            color="#879BBA"
            bg-color="#ECF0F7"
          ></u-search>
        </view>
        <view class="float_right" @click="openSearch"
          ><text class="custom-icon custom-icon-shaixuan"></text
        ></view>
      </view>
    </view>
    <scroll-view
      scroll-y
      class="order_ul"
      @scrolltolower="scrollTolower"
      @refresherrefresh="refresherrefresh"
      :refresher-enabled="true"
      :refresher-triggered="refresher_triggered"
    >
      <view
        class="order_li"
        v-for="(item, index) in order_list"
        :key="index"
        @click="goPage(`/pagesT/order/ReturnDetail?id=` + item.id)"
      >
        <view class="order_time clearfix">
          <view class="float_left">
            <view class="tag-circleRight">
              <image
                :src="
                  item.inStatus === 4
                    ? '../../static/img/ic-delivered.png'
                    : item.inStatus === 5
                    ? '../../static/img/ic-stock.png'
                    : '../../static/img/ic-delivered.png'
                "
                class="img"
              ></image>
            </view>
            <text class="txt">{{ item.no }}</text>
          </view>
        </view>
        <view class="order_bottom">
          <view class="order_params">
            客户名称
            <text class="right-txt">{{ item.customerName }}</text>
          </view>
          <view class="order_params clearfix">
            退货时间
            <text class="right-txt">{{
              $u.timeFormat(item.createTime, "yyyy-mm-dd hh:MM:ss")
            }}</text>
          </view>
          <view class="order_params clearfix">
            退货数量
            <text class="right-txt">{{ item.num }}</text>
          </view>
        </view>
        <view
          class="clearfix pay-status-tip"
          :class="[
            parseInt(item.auditStatus) === 2
              ? 'pay-success'
              : parseInt(item.auditStatus) === 3
              ? 'pay-danger'
              : 'pay-warning',
          ]"
        >
          <text class="float_left">
            <text class="txst">退货金额</text>
            <text class="money-text">{{
              $utils.formattedNumber(item.returnTotalPrice)
            }}</text>
          </text>
          <view class="float_right txst">
            <text
              :class="[
                parseInt(item.auditStatus) === 2
                  ? 'primary-status'
                  : parseInt(item.auditStatus) === 3
                  ? 'danger-status'
                  : 'warning-status',
              ]"
            >
              {{
                parseInt(item.auditStatus) === 2
                  ? "已审核"
                  : parseInt(item.auditStatus) === 3
                  ? "已驳回"
                  : "未审核"
              }}
            </text>
          </view>
        </view>
      </view>
      <view v-if="!order_list.length" class="empty-view"
        ><u-empty text="暂无订单" mode="order"></u-empty
      ></view>
      <u-loadmore v-if="order_list.length" :status="load_status" />
    </scroll-view>
    <addBtn url="/pagesT/order/AddReturn"></addBtn>
    <u-popup v-model="search_show" mode="right">
      <view class="search-pop">
        <uniStatusBar></uniStatusBar>
        <view class="form-view" style="padding-top: 45px">
          <u-form label-width="160rpx" label-position="left">
            <u-form-item label-position="top" label="退货日期">
              <view class="date-li">
                <picker mode="date" @change="bindDateStartChange">
                  <text class="date-li">{{
                    search_data.start
                      ? $u.timeFormat(search_data.start, "yyyy-mm-dd")
                      : "开始日期"
                  }}</text>
                </picker>
              </view>
              <view class="date-line">-</view>
              <view class="date-li">
                <picker mode="date" @change="bindDateEndChange">
                  <text class="date-li">{{
                    search_data.end
                      ? $u.timeFormat(search_data.end, "yyyy-mm-dd")
                      : "结束日期"
                  }}</text>
                </picker>
              </view>
            </u-form-item>
            <u-form-item label="所属店铺">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/shop/selShop')"
              >
                <text class="float_left ellipsis">{{
                  search_data.shopId ? search_data.shopName : "请选择"
                }}</text>
                <view class="float_right" @click.stop="clearValue('shopId')">
                  <u-icon
                    :name="
                      !search_data.shopId ? 'arrow-right' : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
            <u-form-item label-position="top" label="审核状态">
              <text
                v-for="(item, index) in order_status"
                :key="index"
                class="check-li"
                :class="[
                  search_data.auditStatus === item.value ? 'active' : '',
                ]"
                @click="statusChange(item)"
              >
                {{ item.label }}
              </text>
            </u-form-item>
            <u-form-item label-position="top" label="入库状态">
              <text
                v-for="(item, index) in single_status"
                :key="index"
                class="check-li"
                @click="stockChange(item)"
                :class="[search_data.inStatus === item.value ? 'active' : '']"
              >
                {{ item.label }}
              </text>
            </u-form-item>
            <u-form-item label="业务员">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/staff/selStaff')"
              >
                <text class="float_left ellipsis">{{
                  search_data.operatorId ? search_data.operatorName : "请选择"
                }}</text>
                <view
                  class="float_right"
                  @click.stop="clearValue('operatorId')"
                >
                  <u-icon
                    :name="
                      !search_data.operatorId
                        ? 'arrow-right'
                        : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
          </u-form>
        </view>
        <view class="search-btn">
          <view class="btn-li btn-reset" @click="clearValue()">重置</view>
          <view class="btn-li btn-submit" @click="searchConfirm">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import uniStatusBar from "../../components/uni-status-bar.vue";
export default {
  components: {
    uniStatusBar,
  },
  props: {
    shopData: {
      type: [Object, String],
      default: "",
    },
    staffData: {
      type: [Object, String],
      default: "",
    },
  },
  data() {
    return {
      refresher_triggered: false, //设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
      order_status: [
        { value: 2, label: "已审核" },
        { value: 1, label: "待审核" },
      ],
      single_status: [
        { value: 4, label: "未入库" },
        { value: 5, label: "已入库" },
      ],
      search_show: false,
      pay_type_list: [],
      pay_index: 0,
      load_status: "nomore",
      page: 1,
      pageSize: 10,
      total: 0,
      tab_current: 0, // 页面current 0，订单，1，退货单
      order_state: "all", // 订单状态
      order_list: [], // 订单列表
      search_data: {
        inStatus: "", //入库状态
        shopId: "", // 店铺
        shopName: "",
        operatorId: "", //员工
        operatorName: "",
        auditStatus: "", // 审核状态
        start: "",
        end: "",
        search: "", //关键词
      },
    };
  },
  created() {
    this.getAllOrderReturn();
  },
  watch: {
    // 店铺
    shopData(val) {
      if (val) {
        this.search_data.shopName = val.name;
        this.search_data.shopId = val.id;
      }
    },
    // 业务员
    staffData(val) {
      if (val) {
        this.search_data.operatorName = val.staffName;
        this.search_data.operatorId = val.id;
      }
    },
  },
  methods: {
    // 打开搜索弹窗
    openSearch() {
      this.search_show = true;
    },
    // 上拉加载
    scrollTolower() {
      if (this.total / this.pageSize > this.page) {
        this.page += 1;
        this.getData();
      }
    },
    // 复制
    copy(no) {
      uni.setClipboardData({
        data: no,
        success: (res) => {
          uni.showToast({
            title: "复制成功",
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
    // 审核状态切换
    statusChange(row) {
      this.search_data.auditStatus = row.value;
    },
    // 入库状态切换
    stockChange(row) {
      this.search_data.inStatus = row.value;
    },
    // 搜索确定
    searchConfirm() {
      this.search_show = false;
      this.page = 1;
      this.getData();
    },
    // 重置搜索
    clearValue(params) {
      if (!params) {
        this.search_data = {
          inStatus: "", //入库状态
          shopId: "", // 店铺
          shopName: "",
          operatorId: "", //员工
          operatorName: "",
          auditStatus: "", // 审核状态
          start: "",
          end: "",
          search: "", //关键词
        };
        this.searchConfirm();
      } else {
        this.search_data[params] = "";
      }
    },
    getData() {
      const obj = {
        inStatus: this.search_data.inStatus, //入库状态
        shopId: this.search_data.shopId, // 店铺
        operatorId: this.search_data.operatorId, //员工
        auditStatus: this.search_data.auditStatus, // 审核状态
        start: this.search_data.start,
        end: this.search_data.end,
        search: this.search_data.search, //关键词
      };
      const isKey = this.$utils.isSerch(obj);
      if (isKey) {
        this.searchAllOrderOut(obj);
      } else {
        this.getAllOrderReturn();
      }
    },
    // 退货订单列表搜索
    searchAllOrderOut(obj) {
      this.load_status = "loading";
      let params = {
        page: this.page,
        pageSize: this.pageSize,
        ...obj,
      };
      this.$u.api
        .searchAllOrderOut(params)
        .then((res) => {
          // 设置当前下拉刷新状态为false
          this.refresher_triggered = false;
          if (this.page === 1) {
            this.order_list = res.data;
          } else {
            this.order_list = this.order_list.concat(res.data);
          }
          this.order_list = this.order_list.map((item) => {
            return {
              ...item,
              goods_list: item.goods_list || [],
            };
          });
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
        })
        .catch((err) => {
          // 设置当前下拉刷新状态为false
          this.refresher_triggered = false;
        });
    },
    // 退货订单列表
    getAllOrderReturn() {
      this.load_status = "loading";
      let params = {
        page: this.page,
        pageSize: this.pageSize,
      };
      this.$u.api
        .getAllOrderReturn(params)
        .then((res) => {
          // 设置当前下拉刷新状态为false
          this.refresher_triggered = false;
          if (this.page === 1) {
            this.order_list = res.data;
          } else {
            this.order_list = this.order_list.concat(res.data);
          }
          this.order_list = this.order_list.map((item) => {
            return {
              ...item,
              goods_list: item.goods_list || [],
            };
          });
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
        })
        .catch((err) => {
          // 设置当前下拉刷新状态为false
          this.refresher_triggered = false;
        });
    },
    bindDateStartChange(e) {
      this.search_data.start = this.$utils.timeByTimestamp(
        e.detail.value + " 00:00:00"
      );
    },
    bindDateEndChange(e) {
      this.search_data.end = this.$utils.timeByTimestamp(
        e.detail.value + " 23:59:59"
      );
    },
    // 下拉刷新
    refresherrefresh() {
      this.refresher_triggered = true;
      this.page = 1;
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.order-out-box {
  .order-status-tab {
    width: 100%;
    .keyword-view {
      padding: 20rpx 24rpx;
      background-color: #ffffff;
      .float_left {
        width: 640rpx;
      }
      .float_right {
        line-height: 64rpx;
        width: 50rpx;
        text-align: center;
        color: #666666;
      }
    }
  }
}

.order_ul {
  height: calc(90vh - 226rpx);
  padding-top: 24rpx;
  .order_li {
    background-color: #ffffff;
    padding-top: 32rpx;
    border-radius: 8rpx;
    margin: 0 auto 24rpx;
    width: 710rpx;

    .money-text {
      font-family: DIN-Medium;
      color: $uni-color-error;
      margin: 0 4rpx;
      font-size: 28rpx;
      font-weight: 500;
      margin-left: 30rpx;
    }

    .order_time {
      height: 40rpx;
      line-height: 40rpx;
      padding-right: 20rpx;
      margin-bottom: 24rpx;
      .tag-circleRight {
        display: inline-block;
        margin-left: 40rpx;
        vertical-align: middle;
        .img {
          width: 126rpx;
          height: 40rpx;
          display: block;
        }
      }
      .txt {
        font-size: 28rpx;
        font-weight: 500;
        margin-left: 16rpx;
        font-family: DIN-Medium;
      }
    }

    .order_info {
      padding: 30rpx;
      font-size: 24rpx;
      border-bottom: 1px solid #f7f8fa;
    }

    .remarks {
      background-color: #f1f1f1;
      padding: 0 30rpx;
      height: 60rpx;
      line-height: 60rpx;
    }

    .pay-status-tip {
      margin-left: 0rpx;
      color: #333333;
      height: 89rpx;
      vertical-align: middle;
      padding: 25rpx 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 195, 149, 0.1) 100%
      );

      .txst {
        font-size: 28rpx;
        font-weight: 500;
        color: #2d405e;
      }
    }
    .pay-success {
      background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 195, 149, 0.1) 100%
      );
    }

    .pay-danger {
      background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(246, 119, 120, 0.1) 100%
      );
    }
    .pay-warning {
      background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0) 0%,
        #fdf6e8 100%
      );
    }

    .order_bottom {
      margin-left: 40rpx;
      font-size: 28rpx;

      .order_params {
        margin-bottom: 24rpx;
        color: #999999;

        .right-txt {
          font-size: 28rpx;
          font-weight: 400;
          color: #2d405e;
          margin-left: 30rpx;
        }

        .float_right {
          color: #333333;
        }
      }

      .printing-btn {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;

        .custom-icon-dayin {
          font-size: 30rpx;
        }
      }

      .btn {
        display: flex;
        justify-content: center;
        margin-top: 30rpx;

        .btn_some {
          width: 200rpx;
          height: 70rpx;
          line-height: 70rpx;
          text-align: center;
          border-radius: 6rpx;
        }

        .btn_examine {
          border: 1px solid #fb5904;
          color: #fb5904;
        }

        .btn_order {
          border: 1px solid #999999;
          color: #999999;
          margin-left: 30rpx;
        }
      }
    }
  }
}
.search-btn {
  .btn-reset {
    color: #fb5904 !important;
  }
  .btn-submit {
    background-color: #fb5904 !important;
  }
}
.search-pop {
  .active {
    border-color: #fb5904 !important;
    color: #fb5904 !important;
  }
}
</style>
